<template>
  <div class="d">
    <RefreshTop ref="vRefreshTop" @reload="reload" color="white">
      <ul class="list">
        <li class="item" v-for="v in 10" :key="v">{{v}}</li>
      </ul>
    </RefreshTop>
    <button class="btn" @click="refresh">手动刷新</button>
  </div>
</template>

<script>
  import RefreshTop from '@/modules/refresh-top/RefreshTop.vue'
  export default {
    data () {
      return {
      }
    },
    components: {
      RefreshTop
    },
    methods: {
      // 满足条件后执行 reload，触发刷新，加载数据。加载完成后执行 complete
      reload (complete) {
        this.$axios('/test').then(d => {
          console.log('请求完成')
          complete()
        })
      },
      refresh () {
        this.$refs.vRefreshTop.refresh()
      },
      // 模拟ajax
      $axios (url) {
        return new Promise(function (resolve) {
          setTimeout(d => {
            resolve([Math.random(), Math.random(), Math.random()])
          }, 1000)
        })
      }
    }
  }
</script>

<style scoped>
.d{
  background-color: rgb(202, 221, 255);
}
  .list{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .item{
    height: 60px;
    background-color: #ddd;
    margin: 6px 0;
  }
  .btn {
    position: fixed;
    right: 0;
    top: 0;

  }
</style>
